<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{:: title})">
    <title>博客管理</title>
</head>
<body>
    <!--导航-->
    <nav th:replace="admin/_fragments :: nav(1)"></nav>

    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="right menu">
                <a href="#" th:href="@{/admin/blogs/input}" class="item">发布</a>
                <a href="#" th:href="@{/admin/blogs}" class="teal active item">列表</a>
            </div>
        </div>
    </div>

    <!--中间内容-->
    <div class="m-container-small m-padding-tb-huge">
       <div class="ui container">
           <div class="ui secondary segment form">
               <input type="hidden" name="page">
               <div class="inline fields">
                   <div class="field">
                       <input type="text" name="title" placeholder="标题">
                   </div>
                   <div class="field">
                       <div class="ui labeled action input">
                           <div class="ui type selection dropdown">
                               <input type="hidden" name="typeId">
                               <i class="dropdown icon"></i>
                               <div class="default text">分类</div>
                               <div class="menu">
                                   <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">错误日志</div>
                               </div>
                           </div>
                       </div>
                       <button id="clear-btn" class="ui compacted button">clear</button>
                   </div>

                   <div class="field">
                       <div class="ui checkbox">
                           <input type="checkbox" id="recommend" name="recommend">
                           <label for="recommend">推荐</label>
                       </div>
                   </div>
                   <div class="field">
                       <button type="button" id="search-btn" class="ui mini teal basic button"><i class="search icon"></i>搜索</button>
                   </div>
               </div>
           </div>
            <div id = "table-container">
                <table th:fragment="blogList" class="ui compact teal table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>标题</th>
                        <th>类型</th>
                        <th>推荐</th>
                        <th>状态</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr th:each="blog, iterStat : ${page.content}">
                        <td th:text="${iterStat.count}">1</td>
                        <td th:text="${blog.title}">刻意练习清单</td>
                        <td th:text="${blog.type.name}">认知升级</td>
                        <td th:text="${blog.recommend} ? '是' : '否'">是</td>
                        <td th:text="${blog.published} ? '发布' : '草稿'">是</td>
                        <td th:text="${blog.updateTime}">2021-12-02 09:45</td>
                        <td>
                            <a href="#" th:href="@{/admin/blogs/{id}/input(id = ${blog.id})}" class="ui mini blue basic button">编辑</a>
                            <a href="#" th:href="@{/admin/blogs/{id}/delete(id = ${blog.id})}" class="ui mini red basic button">删除</a>
                        </td>
                    </tr>
                    </tbody>

                    <tfoot>
                    <th colspan="7">
                        <div class="ui mini pagination menu" th:if="${page.totalPages} > 1">
                            <a onclick = "page(this)" th:attr = "data-page = ${page.number} - 1" th:unless="${page.first}" class="item">上一页</a>
                            <a onclick = "page(this)" th:attr = "data-page = ${page.number} + 1" th:unless="${page.last}" class="item">下一页</a>
                        </div>
                        <a href="#" th:href="@{/admin/blogs/input}" class="ui right floated mini teal basic button">新增</a>
                    </th>
                    </tfoot>
                </table>
                <div class="ui success message animated pulse" th:unless="${#strings.isEmpty(message)}">
                    <i class="close icon"></i>
                    <div class="header">提示:</div>
                    <p th:text="${message}">恭喜，操作成功</p>
                </div>
            </div>

       </div>
    </div>

    <br>
    <br>
    <br>

    <!--底部footer-->
    <footer th:replace="admin/_fragments :: footer"></footer>

    <!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
    <!--/*/</th:block>/*/-->
    <script>
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide')
        });

        $('.ui.dropdown').dropdown({
            on : 'hover'
        });

        $('.message .close').on('click', function () {
            $(this).closest('.message') .transition('fade');
        });

        $('#clear-btn')
            .on('click', function () {
                $('.ui.type.dropdown')
                .dropdown('clear');
            });

        function page(obj) {
            $("[name = 'page']").val($(obj).data("page"));
            loaddata();
        }

        $("#search-btn").click(function () {
            $("[name = 'page']").val(0);
            loaddata();
        });
        function loaddata() {
            $("#table-container").load(/*[[@{/admin/blogs/search}]]*/"/admin/blogs/search", {
                title : $("[name = 'title']").val(),
                typeId : $("[name = 'typeId']").val(),
                recommend : $("[name = 'recommend']").prop("checked"),
                page : $("[name = 'page']").val()
            });
        }
    </script>
</body>
</html>